import React from 'react'
import {withRouter} from 'react-router-dom'
import {Button, Form, Icon, Input, Tabs} from 'antd';
import {connect} from 'react-redux';
import Immutable from 'immutable';

import './index.css';
import Screen from '../../components/Base/Screen'
import Api from "../../configs/Api";
import CommonUtil from "../../utils/CommonUtil"
import {SystemConfig} from "../../router/router";
import {Helmet} from "react-helmet";

const FormItem = Form.Item;
const TabPane = Tabs.TabPane;

class Login extends Screen {
    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields(async (err, values) => {
            if (!err) {
                let req = await this.request(Api.USER_LOGIN, values);
                if (req.status !== Api.SUCCESS_CODE) return CommonUtil.toast(req.msg);

                // 登录成功
                this.onSetValueToStore(['root', 'user'], Immutable.fromJS(req.data));
                this.onReplaceScreen('/');
            }
        });
    };

    render() {
        const {getFieldDecorator} = this.props.form;
        return (
            <div className="login" style={{marginTop: '2rem'}}>
                <Helmet>
                    <title>后台登录</title>
                </Helmet>
                <div className="admin-login ">
                    <div className="admin-login-right card-container">
                        <h3>{SystemConfig.systemName}系统-用户登录</h3>
                        <div className="admin-login-con">
                            <Form onSubmit={this.handleSubmit} className="login-form">
                                <FormItem>
                                    {getFieldDecorator('account', {
                                        rules: [{required: true, message: '账号不能为空!'}],
                                    })(
                                        <Input prefix={<Icon type="user"
                                                             style={{color: 'rgba(0,0,0,.25)'}}/>}
                                               size={'large'}
                                               placeholder="账号"/>
                                    )}
                                </FormItem>
                                <FormItem>
                                    {getFieldDecorator('password', {
                                        rules: [{required: true, message: '密码不能为空!'}],
                                    })(
                                        <Input prefix={<Icon type="lock"
                                                             style={{color: 'rgba(0,0,0,.25)'}}/>}
                                               size={'large'}
                                               type="password" placeholder="密码"/>
                                    )}
                                </FormItem>

                                <FormItem>
                                    <div className={'loginBtnBox'}>
                                        <Button size={'large'} type="primary" htmlType="submit"
                                                className="login-form-button">
                                            登录
                                        </Button>
                                    </div>
                                </FormItem>
                            </Form>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default withRouter(connect()(Form.create()(Login)))

